<template>
  <table cellspacing="0" cellpadding="0" class="el-date-table">
    <thead>
      <tr>
        <th v-for="(week, key) in weeks" :key="key">{{ t(`el.datepicker-weeks.${week}`) }}</th>
      </tr>
    </thead>
    <tbody>
      <tr class="el-date-table__row" v-for="(row, key) in rows" :key="key">
        <td v-for="(cell, key) in row" :key="key">
          <div>
            <span>{{ cell.text }}</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import Locale from '@/mixins/locale';

const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];

export default {
  mixins: [Locale],
  props: {
    firstDayOfWeek: {
      type: Number,
      default: 7,
      validator: val => val >= 1 && val <= 7
    },
    date: {}
  },
  computed: {
    weeks() {
      const week = this.firstDayOfWeek;
      return WEEKS.concat(WEEKS).slice(week, week + 7);
    },
    year() {
      return this.date.getFullYear();
    },
    month() {
      return this.date.getMonth();
    }
  }
};
</script>

<style></style>
